<template>
    <div>
        <el-card>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>商品管理</el-breadcrumb-item>
                <el-breadcrumb-item>商品评价</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="btnBox">
                <div>
                    <span>商品名称：</span><el-select v-model="selectProductId" placeholder="请选择商品" size="small">
                        <el-option :label="item.productName" :value='item.productId'
                            v-for="(item, index) in productList" :key="index"> </el-option>
                    </el-select>
                </div>
                <div>
                    <el-button size="small" icon="el-icon-search" @click="getList('search')">搜索</el-button>
                    <el-button size="small" icon="el-icon-refresh-right" @click="getList('res')">重置</el-button>
                </div>
                <div>
                    <el-button size="small" icon="el-icon-delete" @click="handle('del', 'top')">删除</el-button>
                    <el-button size="small" icon="el-icon-upload2" @click="handle('top', 'top')">置顶</el-button>
                    <el-button size="small" icon="el-icon-download" @click="handle('down', 'top')">取消置顶</el-button>
                </div>
            </div>
            <el-table :data="tableData" border style="width: 100%" height="626" @selection-change="selectChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="productCommentId" label="ID" width="100"></el-table-column>
                <el-table-column prop="commentUserId" label="评论用户ID" width="100"></el-table-column>
                <el-table-column prop="userName" label="用户名" width="100"></el-table-column>
                <el-table-column label="图片">
                    <template slot-scope="prop">
                        <div class="image-container">
                            <el-image v-for="imageItem in prop.row.imageList" :key="imageItem.commentImageId"
                                :src="imageItem.commentImage" class="image-control"
                                :previewSrcList="prop.row.itemShowImgList">
                            </el-image>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="productName" label="商品名称"></el-table-column>
                <el-table-column prop="commentContent" label="评论内容"></el-table-column>
                <el-table-column prop="commentDate" label="评论时间"></el-table-column>
                <el-table-column prop="isTop" label="是否置顶">
                    <template slot-scope="scope">
                        <span>{{ scope.row.isTop === 1 ? '已置顶' : '未置顶' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="small" icon="el-icon-delete"
                            @click="handle('del', 'table', scope.row.productCommentId)">删除</el-button>
                        <el-button size="small" icon="el-icon-upload2"
                            @click="handle('top', 'uptable', scope.row.productCommentId)"
                            v-if="scope.row.isTop != 1">置顶</el-button>
                        <el-button size="small" icon="el-icon-download"
                            @click="handle('down', 'downtable', scope.row.productCommentId)"
                            v-if="scope.row.isTop == 1">取消置顶</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="paginationBox">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageNum" :page-sizes="[50, 100, 200]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="totalNum"></el-pagination>
            </div>

        </el-card>

    </div>
</template>

<script>
import { getEvaluateList, getProductList, deleteCommentById, TopCommentById } from '../../network/evaluate'
export default {
    data() {
        return {
            tableData: [

            ],
            pageSize: 50,
            pageNum: 1,
            totalNum: 0,
            addialogVisible: false,//弹窗

            selectProductId: '',// 选择的商品

            productList: [
            ],
            selectList: []
        };
    },
    methods: {

        //   删除  置顶  取消置顶
        handle(flag, position, obj) {

            console.log(flag);
            console.log(position);
            console.log(obj);

            if (position == 'top') {
                if (this.selectList.length == 0) {
                    this.$message.warning('请选择要操作的数据')
                    return
                }
            }

            if (flag == 'del') {
                this.$confirm('是否删除该评论?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    if (position == 'table') {
                        // 操作多个
                        let Ids = '';
                        for (let i = 0; i < this.selectList.length; i++) {
                            Ids = Ids + this.selectList[i].productCommentId + ',';
                        }
                        deleteCommentById({ productCommentIds: Ids }).then(res => {
                            if (res.flag) {
                                this.getList('search')
                            }
                        })
                    } else {
                        // 操作一个
                        deleteCommentById({ productCommentIds: String(obj) }).then(res => {
                            if (res.flag) {
                                this.getList('search')
                            }
                        })
                    }
                }).catch(() => {

                });


            } else if (flag == 'top') {
                if (position == 'top') {
                    // 操作多个
                    let Ids = '';
                    for (let i = 0; i < this.selectList.length; i++) {
                        Ids = Ids + this.selectList[i].productCommentId + ',';
                    }
                    TopCommentById({
                        productCommentIds: Ids,
                        isTop: 1
                    }).then(res => {
                        if (res.flag) {
                            this.getList('search')
                        }
                    })
                } else {
                    // 操作一个
                    TopCommentById({
                        productCommentIds: String(obj),
                        isTop: 1
                    }).then(res => {
                        if (res.flag) {
                            this.getList('search')
                        }
                    })
                }

            } else if (flag == 'down') {
                if (position == 'top') {
                    // 操作多个
                    let Ids = '';
                    for (let i = 0; i < this.selectList.length; i++) {
                        Ids = Ids + this.selectList[i].productCommentId + ',';
                    }
                    TopCommentById({
                        productCommentIds: Ids,
                        isTop: 0
                    }).then(res => {
                        if (res.flag) {
                            this.getList('search')
                        }
                    })
                } else {
                    // 操作一个
                    TopCommentById({
                        productCommentIds: String(obj),
                        isTop: 0
                    }).then(res => {
                        if (res.flag) {
                            this.getList('search')
                        }
                    })
                }
            }

        },

        selectChange(val) {
            console.log(val);
            this.selectList = val
        },

        //  获取评论列表
        getList(flag) {
            if (flag == 'search') {
                // 获取数据
                getEvaluateList({
                    pageSize: this.pageSize,
                    pageNum: this.pageNum,
                    productId: this.selectProductId
                }).then(res => {
                    if (res.flag) {
                        res.data.list.forEach(item => {
                            item.itemShowImgList = []
                            item.imageList.forEach(ele => {
                                item.itemShowImgList.push(
                                    ele.commentImage
                                )
                            })
                        })

                        console.log(res.data.list);
                        this.tableData = res.data.list
                        this.totalNum = res.data.total
                    }
                });
            } else if (flag == 'res') {
                this.tableData = []
                this.selectProductId = ''
                this.$message.success('已重置')
                this.getList('search');
            }
        },

        detailHandle(obj) {
            console.log(obj);
        },

        submitAddDialog() {
            this.addialogVisible = false
        },
        // 关闭弹窗
        closeAddDialog() {
            this.addialogVisible = false
        },
        handleSizeChange(val) {
            this.pageSize = val;
        },
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        getCompanyName() {
            console.log(1111);
            getProductList({ companyId: sessionStorage.companyId }).then(res => {
                this.productList = res.data
            })
        }

    },
    created() {

        this.getList('search')
        // getEvaluateList({
        //     pageSize: this.pageSize,
        //     pageNum: this.pageNum
        // }).then(res => {
        //     if (res.flag) {
        //         res.data.list.forEach(item => {
        //             item.itemShowImgList = []

        //             item.imageList.forEach(ele => {
        //                 item.itemShowImgList.push(
        //                     ele.commentImage
        //                 )
        //             })
        //         })
        //         this.tableData = res.data.list
        //         this.totalNum = res.data.total
        //     }
        // });
        this.getCompanyName()

    },
    filters: {

    },
};
</script>

<style scoped>
.image-control {
    margin: 0 10px 10px 0;
    display: inline-block;
    width: 50px !important;
    height: 50px !important;
    border-radius: 8px;
}

.horizontal-image {
    margin-right: 10px;
    /* 设置图片之间的间距 */
}
</style>